<template>
    <div class="screen-wrapper">
        <div class="screen" id="screen">
            <slot></slot>
        </div>
    </div>
</template>
  
<script>


export default {
    name: 'screenBox',
    props: {
        screenOptions: {
            type: Object,
            default: () => ({
                height: 1920,
                width: 1080
            })
        }
    },
    methods: {
        handleScreenAuto() {
            const scale =
                document.documentElement.clientWidth /
                    this.screenOptions.width <
                    document.documentElement.clientHeight / this.screenOptions.height
                    ? document.documentElement.clientWidth / this.screenOptions.width
                    : document.documentElement.clientHeight / this.screenOptions.height;
            // 缩放比例
            document.querySelector(
                '#screen',
            ).style.transform = `scale(${scale}) translate(-50%, -50%)`;
        }
    },
    mounted() {
        // 初始化自适应  ----在刚显示的时候就开始适配一次
        this.handleScreenAuto();
        // 绑定自适应函数   ---防止浏览器栏变化后不再适配
        window.onresize = () => this.handleScreenAuto();
    },
}

</script>
  
<style scoped lang="scss">
.screen-wrapper {
    height: 100vh;
    width: 100vw;
    background-color: aqua;

    .screen {
        width: 1920px;
        height: 1080px;
        // transform-origin: 0 0;
        position: absolute;
        // left: 50%;
    }
}
</style>
  